<template>
  <div class="orderbox">
    <div
      class="orderItem"
      v-for="(item, index) in listData"
      :key="index"
      @click="itemClick(item)"
    >
      <van-row>
        <van-col span="4">
          <div class="imgbox">
            <img src="~@/assets/order.png" alt="" />
          </div>
        </van-col>
        <van-col span="20">
          <div class="infobox">
            <div class="inforow">
              <div class="infotext">工单状态:</div>
              <div class="infomsg wait" v-if="item.status == '待接单'">
                待接单
              </div>
              <div class="infomsg ing" v-if="item.status == '进行中'">
                进行中
              </div>
              <div class="infomsg end" v-if="item.status == '已完成'">
                已完成
              </div>
            </div>
            <div class="inforow">
              <div class="infotext">工单类型:</div>
              <div class="infomsg">{{ item.type }}</div>
            </div>
            <div class="inforow" v-if="item.finish_time === null">
              <div class="infotext">申报时间:</div>
              <div class="infomsg">{{ item.create_time | datefmt }}</div>
            </div>
            <div class="inforow" v-else>
              <div class="infotext">完成时间:</div>
              <div class="infomsg">{{ item.finish_time | datefmt }}</div>
            </div>
          </div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    listData: {
      type: Array,
      default() {
        return [];
      },
    },
  },

  methods: {
    itemClick(item) {
      this.$router.push({
        path: "/detail",
        query: item,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.wait {
  color: red;
}
.ing {
  color: orange;
}
.end {
  color: green;
}
.orderItem {
  height: 80px;
  margin: 0.5em 1em;
  padding: 0.5em;
  border-radius: 5px;
  border: 1px dotted #ccc;
  overflow: hidden;
  .imgbox {
    transform: translateY(12px);
    img {
      width: 100%;
      height: 100%;
    }
  }
  .infobox {
    padding-left: 20px;
    padding-top: 5px;
    .inforow {
      display: flex;
      margin-bottom: 5px;
      .infotext {
        margin-right: 10px;
        font-weight: 700;
      }
      .infomsg {
        line-height: 20px;
      }
    }
  }
}
</style>